ひとりNavigation API Advent Calendar 06日目

https://gyazo.com/cfb696ebf32384f62597b207dd4b16d4

History APIの仕組みが分かったところでクライアントサイドのルーティングとやらを作ってみましょう

https://scrapbox.io/files/69341693b61ef63b4b4bd555.mp4

リンクに対してクライアントサイドルーティングを発生させるだけのシンプルな作りです

navigateにまつわる挙動

1. ユーザーがリンクをクリック

2. document全体のclickイベントが発火

3. event.preventDefault()で通常のページ遷移を防止

4. href属性からパスを取得

5. navigate()メソッドを呼び出し

6. history.pushState()でURLを変更（リロードなし）

8. DOMを更新してコンテンツを表示

code:js

const router = TinyRouter('#app');

router

.on('/', () => '<h1>Home</h1>')

.on('/about', () => '<h1>About</h1>')

.on('/user/:id', (id) => <h1>User: ${id}</h1>)

.init();

ルーティング管理はこういうチェーンじゃないほうがいいんだろうね